<template>
	<view class="container">
		<u-sticky bgColor="#fff">
			<div class="nav-tab card-style">
				<u-tabs :list="tabList" @click="switchMethods"></u-tabs>
			</div>
		</u-sticky>
		<div class="blank"></div>
		<div class="answer-area card-style">
			<div class="tab-title">
				🖊1~3分钟回答以下问题
				<div class="submit-btn">
					<u-button type="primary" text="提交选择" size="mini" v-if="showSubmitBtn"
						@click="submitAnswer"></u-button>
				</div>
			</div>
			<div class="line"><u-line></u-line></div>
			<div class="first-method" v-if="hasSelect === true">
				<view class="swiper-container">
					<swiper class="swiper" :current="currentIndex" :autoplay="false" interval="9000" circular
						indicator-dots @change="handleSwiperChange">
						<block v-for="(item, index) in questionList" :key="index">
							<swiper-item>
								<div class="question-area">
									<u--text :text="item.question" size="17" :bold="true"></u--text>
								</div>
								<u-radio-group v-model="item.answer" placement="row" @change="groupChange"
									class="radio-group">
									<u-radio activeColor="rgb(25, 190, 107)" shape="square" label="有" name="有"
										iconSize="17" labelSize="17"></u-radio>
									<u-radio :customStyle="{marginLeft: '50px'}" activeColor="rgb(25, 190, 107)"
										shape="square" label="无" name="无" iconSize="17" labelSize="17"></u-radio>
								</u-radio-group>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</div>
			<div class="second-method" v-else>
				<div v-if="hasSelect === false" class="select-disease">
					<u-grid :border="false" col="6" @click="seleTargetDisaese">
						<u-grid-item v-for="(item,index) in diseaseListWithIcon" :key="index">
							<image :src="item.url" style="width: 22px;height: 22px;"></image>
							<text class="grid-text">{{item.title}}</text>
						</u-grid-item>
					</u-grid>
					<div class="tip-text">
						<u--text type="info" text="请选择要诊断的疾病" size="18"></u--text>
					</div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<div class="result-area card-style">
			<div class="tab-title">🔎自测结果</div>
			<div class="line"><u-line></u-line></div>
			<div v-if="nowTabs === 0">
				<div class="table-row">
					<div v-for="(item,index) in diseaseList" :key="index" class="single-data">
						<u--text :text="item" align="center" size="17"></u--text>
						<div class="col-line" v-if="index !== diseaseList.length - 1">
							<u-line direction="col" color="black"></u-line>
						</div>
					</div>
				</div>
				<div class="table-row">
					<div v-for="(item,index) in probList" :key="index" class="single-data">
						<u--text :text="item + '%'" align="center" size="17"></u--text>
						<div class="col-line" v-if="index !== probList.length - 1">
							<u-line direction="col" color="black"></u-line>
						</div>
					</div>
				</div>
			</div>
			<div v-else>
				<u--text :text="questionnaireResult" size="17"></u--text>
			</div>
		</div>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否已经选择了自测疾病
				hasSelect: true,
				nowTabs: 0,
				showSubmitBtn: false,
				probList: [0, 0, 0, 0, 0],
				// 要显示的问题
				questionList: [],
				// 问卷调查法选择的疾病的下标
				selectDisease: 0,
				questionnaireResult: '',
				questionnaireDescrption: [
					['症状较轻，但仍建议定期眼科检查。','可能存在糖尿病相关眼病风险，建议尽快就医检查。','眼部可能已受损，建议立即就医，以防进一步恶化。'],
					['症状较轻，但仍建议定期眼科检查，尤其是有青光眼家族史者。','可能有青光眼早期风险，建议尽快就医筛查。','青光眼风险较高，可能已有视神经受损，建议立即就医，以防视力进一步恶化。'],
					['暂时无需担心，但建议定期检查眼睛。','可能有白内障早期症状，建议尽快就医检查。','可能白内障已经影响视力，建议尽快咨询眼科医生，考虑治疗方案。'],
					['暂时无需担心，但建议定期检查眼睛。','可能有 AMD 早期症状，建议尽快就医检查。','可能存在 AMD 进展风险，建议立即就医，以免视力进一步恶化。'],
					['可能存在 AMD 进展风险，建议立即就医，以免视力进一步恶化。','可能存在高血压视网膜病变的早期症状，建议尽快就医检查眼底情况。','可能已有较严重的眼部损伤，建议立即就医，以免影响视力或发生更严重并发症。'],
					['视力和眼部健康无明显异常，但仍建议定期检查视力和眼底健康。','可能存在近视引起的眼部问题或早期眼病，建议尽早就医检查。','可能存在近视引起的眼部问题或早期眼病，建议尽早就医检查。'],
				],
				tabList: [{
					name: '概率计算法'
				}, {
					name: '问卷调查法'
				}],
				diseaseList: ['糖尿病', '青光眼', '白内障', '近视', '高血压'],
				allQuestionnaireList: [
					[{
							question: '是否经常出现视力模糊或视物不清？',
							answer: '',
						},
						{
							question: '视力是否时好时坏，尤其是血糖变化后？',
							answer: '',
						},
						{
							question: '是否感觉眼前有黑影、暗点、漂浮物（飞蚊症）？',
							answer: '',
						},
						{
							question: '是否出现视野缺损（某个区域看不见）或视野缩小？',
							answer: '',
						},
						{
							question: '是否对光特别敏感（畏光）或看到眩光、光晕？',
							answer: '',
						},
						{
							question: '夜间视力是否明显下降，难以在黑暗中看清？',
							answer: '',
						},
						{
							question: '是否经常感觉眼睛干涩、疲劳或疼痛？',
							answer: '',
						},
						{
							question: '是否有双眼重影（复视）或对比敏感度下降？',
							answer: '',
						},
						{
							question: '是否突然视力大幅下降或一只眼睛完全看不见？',
							answer: '',
						},
						{
							question: '是否出现眼前有闪光感（如看到“闪电”）？',
							answer: '',
						},
					],
					[{
							question: '近期是否感觉视力下降，尤其是周围（侧方）视力变差？',
							answer: '',
						},
						{
							question: '是否出现视野缩小，比如走路容易撞到东西或看不清侧面的物体？',
							answer: '',
						},
						{
							question: '是否有视野缺损，比如有固定的“黑影”或“盲点”？',
							answer: '',
						},
						{
							question: '是否经常感到眼睛疲劳、酸胀或头痛，特别是在阅读或看屏幕后？',
							answer: '',
						},
						{
							question: '是否曾出现眼睛疼痛，甚至是剧烈的眼部或头部疼痛？',
							answer: '',
						},
						{
							question: '是否有眼部红肿但无明显炎症或感染？',
							answer: '',
						},
						{
							question: '是否在夜间或灯光下看到光晕（比如灯周围出现彩色光圈）？',
							answer: '',
						},
						{
							question: '是否在光线较暗的环境下，视物困难或夜间视力下降？',
							answer: '',
						},
						{
							question: '是否曾突然视力模糊，并伴随恶心或呕吐？',
							answer: '',
						},
						{
							question: '是否曾短暂性失明或感觉视野“被遮挡”了一部分？',
							answer: '',
						},
					],
					[{
							question: '是否感觉视力逐渐下降，即使佩戴眼镜也难以改善？',
							answer: '',
						},
						{
							question: '是否有视物模糊，就像“蒙了一层雾”或“玻璃脏了”一样？',
							answer: '',
						},
						{
							question: '是否有颜色变淡或发黄的情况，比如看到的白色变黄或褐色？',
							answer: '',
						},
						{
							question: '是否在明亮环境下视力反而更差（如阳光强烈时看不清）？',
							answer: '',
						},
						{
							question: '是否容易畏光，看到灯光时感到刺眼？',
							answer: '',
						},
						{
							question: '是否在夜间或暗处视力明显下降，看东西吃力？',
							answer: '',
						},
						{
							question: '是否看到光源时出现眩光或光晕（如车灯周围有光圈）？',
							answer: '',
						},
						{
							question: '是否感觉物体变形或双影（复视）？',
							answer: '',
						},
						{
							question: '是否频繁需要更换眼镜度数，但效果不佳？',
							answer: '',
						}
					],
					[{
							question: '是否感觉中心视力模糊，看人脸、书本或手机屏幕时看不清？',
							answer: '',
						},
						{
							question: '是否在阅读或注视某物时，感觉视野中央有暗点或空缺？',
							answer: '',
						},
						{
							question: '是否感觉视力下降，尤其是在低光环境下更明显？',
							answer: '',
						},
						{
							question: '是否在看直线（如窗框、瓷砖缝、书本字行）时，感觉线条扭曲或弯曲？',
							answer: '',
						},
						{
							question: '是否在看东西时，某些区域变暗、变模糊或颜色变淡？',
							answer: '',
						},
						{
							question: '是否从亮处进入暗处时，眼睛适应变慢，比如进入电影院后视物困难？',
							answer: '',
						},
						{
							question: '是否对比敏感度下降，比如比以前更难分辨相似颜色或阴影？',
							answer: '',
						}
					],
					[{
							question: '是否视力模糊或下降，尤其是血压升高时更明显？',
							answer: '',
						},
						{
							question: '是否看东西时有暗点或黑影，比如感觉某个区域视线受阻？',
							answer: '',
						},
						{
							question: '是否有视物变形，如直线看起来弯曲或波浪状？',
							answer: '',
						},
						{
							question: '是否曾被医生告知眼底血管狭窄、硬化或出血？',
							answer: '',
						},
						{
							question: '是否曾因血压升高出现眼前飘浮物（飞蚊症）或短暂性视力丧失？',
							answer: '',
						},
						{
							question: '是否有眼睛充血、眼球发胀或疼痛？',
							answer: '',
						},
						{
							question: '是否在血压波动时出现眼睛干涩、酸胀或异物感？',
							answer: '',
						},
						{
							question: '是否经常伴有头痛、头晕或偏头痛？',
							answer: '',
						},
						{
							question: '是否曾有高血压危象（血压突然飙升，出现胸闷、气短、视物模糊等）？',
							answer: '',
						}
					],
					[{
							question: '是否经常感到看远处物体模糊不清？',
							answer: '',
						},
						{
							question: '是否在看远的东西时必须眯眼才能看清？',
							answer: '',
						},
						{
							question: '是否在长时间使用眼睛后，出现眼睛疲劳、酸胀、或疼痛？',
							answer: '',
						},
						{
							question: '是否常有眼睛干涩或异物感，尤其是长时间使用手机或电脑后？',
							answer: '',
						},
						{
							question: '是否经常出现视物变形（如直线看起来弯曲或波浪状）？',
							answer: '',
						},
						{
							question: '是否有夜间视力下降，尤其是驾驶时更为明显？',
							answer: '',
						},
						{
							question: '是否曾被医生告知眼底有病变或视网膜出血等异常？',
							answer: '',
						},
						{
							question: '是否有过视力突然下降或模糊的情况？',
							answer: '',
						},
						{
							question: '是否感到眼前有浮动的黑点（飞蚊症）或闪光？',
							answer: '',
						},
						{
							question: '是否有过眼球疼痛、眼压升高（例如青光眼相关症状）？',
							answer: '',
						},
						{
							question: '是否有过视野缺损，例如视野某些区域的视力丧失？',
							answer: '',
						},
						{
							question: '是否出现过眼前黑影、闪光或短暂的视力丧失？',
							answer: '',
						}
					]
				],
				allQuestionList: [{
					question: '您最近有没有感到眼睛干涩、异物感、眼球充血或发胀？',
					answer: '',
					prob: [0.2, 0.1, 0.05, 0.6, 0.3],
				}, {
					question: '您最近有没有感到远处物体模糊不清，且需要眯眼才能看清？',
					answer: '',
					prob: [0.1, 0.2, 0.15, 0.8, 0.25]
				}, {
					question: '您最近有没有眼底血管狭窄或出血现象？',
					answer: '',
					prob: [0.8, 0.25, 0.1, 0.3, 0.7]
				}, {
					question: '您最近有没有感到中央视野的暗点或空白区域？',
					answer: '',
					prob: [0.3, 0.6, 0.05, 0.2, 0.4]
				}, {
					question: '您最近有没有感到视力逐渐模糊或丧失，尤其在长时间没有控制血糖？',
					answer: '',
					prob: [0.7, 0.2, 0.1, 0.3, 0.4]
				}, {
					question: '您有没有眼压升高或曾被诊断为青光眼？',
					answer: '',
					prob: [0.2, 0.05, 0.1, 0.7, 0.1]
				}, {
					question: '您最近有没有感到视物扭曲或弯曲，尤其是直线看起来波浪状？',
					answer: '',
					prob: [0.3, 0.2, 0.1, 0.5, 0.3]
				}, {
					question: '您最近有没有感到视野逐渐缩小或偏盲？',
					answer: '',
					prob: [0.2, 0.8, 0.1, 0.4, 0.2]
				}, {
					question: '您最近有没有感到夜间视力下降，尤其在低光环境下',
					answer: '',
					prob: [0.2, 0.1, 0.6, 0.4, 0.1]
				}],
				diseaseListWithIcon: [{
						url: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/D.png',
						title: '糖尿病'
					},
					{
						url: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/G.png',
						title: '青光眼'
					},
					{
						url: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/C.png',
						title: '白内障'
					},
					{
						url: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/A.png',
						title: 'AMD'
					},
					{
						url: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/H.png',
						title: '高血压'
					},
					{
						url: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/M.png',
						title: '近视'
					},
				],
				currentIndex: 0,
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.questionList = this.allQuestionList
			})
		},
		methods: {
			switchMethods(obj) {
				this.nowTabs = obj.index
				this.currentIndex = 0;
				this.showSubmitBtn = false;
				for (let i = 0; i < this.probList.length; i++) {
					this.probList[i] = 0;
				}

				if (this.nowTabs === 0) {
					this.hasSelect = true;
					this.questionList = this.allQuestionList
				} else {
					this.hasSelect = false;
					this.questionnaireResult = ''
				}
			},
			handleSwiperChange(event) {
				const current = event.detail.current;
				this.currentIndex = current;
			},
			// 当选择了radio之后触发的函数
			groupChange(value) {
				let ok = 1;
				for ( let i = 0 ; i < this.questionList.length ; i ++ ) {
					if ( this.questionList[i].answer === '' ) {
						ok = 0;
					}
				}
				
				if ( ok === 1 ) this.showSubmitBtn = true;
				else this.showSubmitBtn = false;
			},
			// 问卷调查法选择疾病触发函数
			seleTargetDisaese(name) {
				this.hasSelect = true;
				this.questionList = this.allQuestionnaireList[name]
				this.selectDisease = name
			},
			submitAnswer() {
				if (this.nowTabs === 0) {
					let list = [0, 0, 0, 0, 0]
					for (let i = 0; i < this.questionList.length; i++) {
						if (this.questionList[i].answer === '有') {
							for (let j = 0; j < list.length; j++) {
								if (list[j] === 0) {
									list[j] = 1;
								}
								list[j] *= (1 - this.questionList[i].prob[j])
							}
						}
					}
					for (let i = 0; i < this.probList.length; i++) {
						this.probList[i] = Math.round((1 - list[i]) * 100);
					}
					this.$refs.uToast.show({
						type: 'success',
						message: "概率计算完毕",
						position: "top"
					});
					
					for ( let i = 0 ; i < this.questionList.length ; i ++ ) {
						this.questionList[i].answer = ''
					}
				}else {
					let yes = 0;
					for ( let i = 0 ; i < this.questionList.length ; i ++ ) 
						if ( this.questionList[i].answer === '有' ) {
							yes ++;
						}
					
					if ( yes >= 0 && yes <= 1 ) {
						this.questionnaireResult = this.questionnaireDescrption[this.selectDisease][0]
						return;
					}
					
					if ( yes >= 2 && yes <= 3 ) {
						this.questionnaireResult = this.questionnaireDescrption[this.selectDisease][1]
						return;
					}
					
					if ( yes >= 4 ) {
						this.questionnaireResult = this.questionnaireDescrption[this.selectDisease][2]
						return;
					}
					
					this.$refs.uToast.show({
						type: 'success',
						message: "自测成功，结果已在下方显示。",
						position: "top"
					});
				}
			}
		}
	}
</script>

<style>
	@keyframes moveIn {
		0% {
			opacity: 0;
			transform: translateY(12px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.card-style {
		border-radius: 4px;
		border: 1px solid #ebeef5;
		background-color: #fff;
		color: #303133;
		transition: .3s;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		animation: moveIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.nav-tab {
		width: 100%;
		height: 7%;
		display: flex;
		justify-content: center;
		padding: 5rpx;
	}

	.blank {
		height: 5px;
	}

	.answer-area {
		height: 30%;
		width: 100%;
		margin: 0 auto;
		padding-top: 5px;
		display: flex;
		flex-direction: column;
	}

	.result-area {
		padding: 5px;
	}

	.tab-title {
		font-size: 17px;
		font-weight: bold;
		position: relative;
	}

	.submit-btn {
		position: absolute;
		right: 10px;
		top: 1px;
	}

	.line {
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.first-method {
		flex: 1;
		padding: 5px;
	}

	.question-area {
		height: 60%;
	}

	.radio-group {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swiper-container {
		height: 100%;
		position: relative;
	}

	.swiper {
		height: 100%;
	}

	.table-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.single-data {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.col-line {
		width: 10px;
		height: 20px;
	}

	.second-method {
		flex: 1;
		padding: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.select-disease {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.tip-text {
		margin: 10px auto;
	}
</style>